<template>
    <view class="vip-out-wrapper">
        <view class="thumbnail-card">
            <view class="title">
                <text class="icon-vip icon-btn"/>
                <text>拇指会有</text>
            </view>
            <view class="join-vip">加入拇指会员</view>
            <view class="rights">专享属于您的八大权益</view>
        </view>
        <view class="common-interval vip-rights">
            <view class="title">会员权益</view>
            <view class="common-card-info">
                <view @tap="$LinkTo(item.link)" class="card-info-item" v-for="(item, index) in cardData" :key="index">
                    <image mode="aspectFit" :src="http+item.icon+'.png'" class="rights-interests"/>
                    <view class="info-name">{{item.label}}</view>
                </view>
            </view>
        </view>
        <view class="common-division"/>
        <view class="vip-wrapper common-interval">
            <view class="vip-type">
                <view @tap="changeType(item.value)" v-for="item in cardType" :key="item.value" class="title" :class="{'active': item.value === activeval}">
                    <view>
                        {{item.label}}
                    </view>
                    <text class="active-line"/>
                </view>
            </view>
            <view class="all-vip-card"  >
                <gw-vip-card class="vip-card-info"
                             :is-active="chooseCardInfo.vipCardId === item.vipCardId"
                             v-if="item.vipCardType === activeval"
                             v-for="(item, index) in vipCards"
                             :key="index"
                             :item="item"
                             @tap="chooseVip(item)"
                />
            </view>
            <view class="borrow-tips" v-if="activeval === 1">
                借阅须知：<br/>
                {{chooseCardInfo.vipCardBorrowFrequency || 0}}次卡。每次可借{{chooseCardInfo.vipCardBooksNum || 0}}本。次卡有效期为{{chooseCardInfo.vipCardDate || 0}}天，自激活其生效
            </view>
            <view class="borrow-tips" v-if="activeval === 2">
                借阅须知：<br/>
                月卡借阅时间为：{{chooseCardInfo.vipCardDate || 0}}天
            </view>
        </view>
        <view class="common-division"/>
        <view class="deposit-payment">
            <view class="common-flex-between">
                <text class="title">缴纳押金（可退）</text>
                <text class="price">¥{{chooseCardInfo.vipCardDeposit || 0}}</text>
            </view>
            <view class="tips">
                每单或者同一时间内可以借阅的最多数量，不同的借阅数量，所缴纳的押金不同，押金仅作为借阅保障，借阅完成后，随时可退。
            </view>
        </view>
        <view/>
        <view class="place-order common-fixed fix">
            <view class="order-num">
                <view>
                    <text class="title">合计：</text>
                    <text class="price">¥ {{(Number(chooseCardInfo.vipCardDeposit || 0) + Number(chooseCardInfo.vipCardDactualMoney || 0))}}</text>
                </view>
                <view class="deposite">含押金：¥ {{chooseCardInfo.vipCardDeposit || 0}}</view>
            </view>
            <text class="common-bottom-btn" @tap="paymentHandle" v-if="!hidePart">立即下单</text>
        </view>
        <view style="background: #F2F5F7; height: 160rpx;"/>
    </view>
</template>

<script>
    import gwVipCard from '../../pages/components/gw-vip-card.vue'
    import { mapGetters } from 'vuex';
    import service from "@/service";
    import { formatMoney } from '@/util/formatMoney';
    export default {
        name: "index",
        components: {
            gwVipCard
        },
        computed: {
            ...mapGetters(['hidePart'])
        },
        data() {
            return {
                http: this.$https,
                cardData: [
                    {
                        label: '正品保障',
                        icon: 'vip-rights-one1'
                    },
                    {
                        label: '往返包邮',
                        icon: 'vip-rights-two1'
                    },
                    {
                        label: '海量书库',
                        icon: 'vip-rights-three1'
                    },
                    {
                        label: '百万玩具',
                        icon: 'vip-rights-four1'
                    },
                    {
                        label: '线上下单',
                        icon: 'vip-rights-five1'
                    },
                    {
                        label: '次数不限',
                        icon: 'vip-rights-six1'
                    },
                    {
                        label: '安全消毒',
                        icon: 'vip-rights-seven1'
                    },
                    {
                        label: '押金可退',
                        icon: 'vip-rights-eight1'
                    },
                ],
                vipCard: [1,2,3,4,5,6],
                activeval: 1,
                cardType: [{
                    label: 'VIP次卡',
                    value: 1
                }, {
                    value: 2,
                    label: 'VIP时长卡'
                }],
                vipCards: [],
                chooseCardInfo: {},
                timer: null,
                loop: 0
            }
        },
        methods: {
            changeType(value){
                this.activeval = value;
                this.getVipCards();
            },
            chooseVip(item){
                this.chooseCardInfo = item
            },
            getVipCards(){
                uni.showLoading({
                    title: '',
                });
                service.mineService.getVipCards({
                    data: {
                        vipCardType: this.activeval
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.vipCards = res.result || [];
                            this.chooseCardInfo = res.result[0]
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            getCardOrder(orderId){
                uni.showLoading({
                    title: '加载中',
                });
                let that = this;
                service.mineService.getCardOrder({
                    data: {
                        orderId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            if(res.result.orderStatus){
                                clearInterval(that.timer);
                                let {vipCardMemberLogId, orderNum, orderMoney} = res.result || {}
                                uni.getStorage({
                                    key: 'formCopartner',
                                    success: (res) => {
                                        uni.removeStorage({
                                            key: 'formCopartner',
                                            success: function (res) {
                                                
                                            }
                                        });
                                        if (!this.$store.getters.becomeShareAddTime) {
                                            this.$routerTo({
                                                path: '/pagesMine/copartner/form',
                                                query: {},
                                                type: 'RT'
                                            })
                                            return
                                        }
                                        this.$routerTo({
                                            path: '/pagesMine/copartner/index'
                                        })
                                    },
                                    fail: () => {
                                        uni.navigateTo({
                                            url: `../success/vip-pay-success?vipCardMemberLogId=${vipCardMemberLogId}&orderNum=${orderNum}&orderMoney=${orderMoney}`
                                        });
                                    }
                                });
                            } else {
                                clearInterval(that.timer);
                                that.timer = setInterval(()=>{
                                    that.loop++
                                    if(that.loop>5){
                                        uni.showToast({
                                            title: `${res.resultMsg}`,
                                            duration: 2500,
                                            icon: 'none'
                                        });
                                        clearInterval(that.timer);
                                        that.loop = 0;
                                        return;
                                    }
                                    // this.getMcards();
                                    that.getCardOrder(orderId);
                                }, 2000)
                            }

                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            paymentHandle(){
                let that = this;
                uni.showLoading({
                    title: '',
                });
                service.mineService.cardOrder({
                    data: {
                        vipCardId: this.chooseCardInfo.vipCardId,
                        vipCardDactualMoney: this.chooseCardInfo.vipCardDactualMoney,
                        vipCardDeposit: this.chooseCardInfo.vipCardDeposit,
                        money: Number(this.chooseCardInfo.vipCardDactualMoney) + Number(this.chooseCardInfo.vipCardDeposit),
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let payConf = res.result.payConf || {};
                            let orderId = res.result.orderId;
                            // uni.navigateTo({
                            //     url: `../success/vip-pay-success`
                            // });
                            uni.requestPayment({
                                provider: 'wxpay',
                                timeStamp: payConf.timeStamp,
                                nonceStr: payConf.nonceStr,
                                package: payConf.package,
                                signType: 'MD5',
                                paySign: payConf.paySign,
                                success: function (res) {
                                    that.getCardOrder(orderId);
                                },
                                fail: function (err) {
                                    console.log('fail:' + JSON.stringify(err));
                                }
                            });
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {

                    },
                });
            },
        },
        filters: {
            formatMoneyFn(num){
                return formatMoney(num);
            }
        },
        onLoad(){
            this.getVipCards();
        },
        onHide(){
            clearInterval(this.timer);
        }
    }
</script>

<style scoped lang="scss">
    .vip-out-wrapper{
    }
    .thumbnail-card{
        height:310rpx;
        background:linear-gradient(147deg,rgba(251,231,184,1) 0%,rgba(243,204,135,1) 100%);
        box-shadow:0px 3rpx 10rpx rgba(246,215,156,0.5);
        border-radius:10rpx;
        padding: 43rpx 45rpx;
        margin: 0 30rpx;
        box-sizing: border-box;
        .title{
            font-size:38rpx;
            font-weight:bold;
            color:rgba(120,72,47,1);
            .icon-btn{
                margin-right: 20rpx;
            }
        }
        .join-vip{
            font-size:38rpx;
            font-weight:bold;
            margin-top: 34rpx;
            color:rgba(160,70,23,1);
        }
        .rights{
            font-size:28rpx;
            margin-top: 10rpx;
            color:rgba(160,70,23,1);
        }
    }
    .vip-rights{
        .title{
            margin: 40rpx 0;
        }
        .rights-interests{
            width: 70rpx;
            height: 70rpx;
        }
    }
    .vip-wrapper{
        .all-vip-card{
            /*display: flex;*/
            /*flex-wrap: wrap;*/
            /*margin-right: 15rpx;*/
            /*&:nth-of-type(3n){*/
                /*margin-right: 0;*/
            /*}*/
        }
        .vip-type{
            padding: 50rpx 170rpx;
            display: flex;
            font-size:28rpx;
            font-weight:500;
            color: #999999;
            justify-content: space-between;
            .title{
               justify-content: center;
                height: 52rpx;
                &.active{
                    font-size:32rpx;
                    color: #333333;
                    font-weight:bold;
                    .active-line{
                        display: inline-block;
                        width:54rpx;
                        position: relative;
                        top: -20rpx;
                        height:4rpx;
                        background:rgba(43,168,252,1);
                        border-radius:20rpx;
                        margin-left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
        }
        .vip-card-info{
            /*width:220rpx;*/
            /*height:287rpx;*/
        }
        .borrow-tips{
            font-size:28rpx;
            line-height:40rpx;
            padding: 20rpx 0;
            color: #666666;
        }
    }
    .deposit-payment{
        padding: 40rpx 30rpx;
        .title{
            font-size:32rpx;
            font-weight:bold;
            color: #333333;
        }
        .price{
            font-size:34rpx;
            font-weight:bold;
            color: #F02323;
        }
        .tips{
            background:rgba(255,180,68,0.2);
            padding: 15rpx 20rpx;
            font-size:28rpx;
            line-height:40rpx;
            color: #FF5555;
            margin-top: 20rpx;
        }
    }
    .place-order{
        .order-num{
            font-size:28rpx;
            font-weight:bold;
            .title{
                color:#333333;
            }
            .price{
                color: #FF1D1D;
            }
        }
        .deposite{
            font-size: 24rpx;
            color: #999999;
        }
    }
</style>